<template>
  <div>
    <!-- 头部 -->
    <Home-head />
    <!-- /头部 -->
    <div class="wrap2">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid clickable>
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
            @click="enterList(cate.id)"
          />
        </van-grid>
        <!-- /宫格导航 -->
        <van-list
          v-model="loading"
          :offset="50"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 推荐商品 -->
          <medicine :items="items" @clickItem="enterDetail"/>
          <!-- /推荐商品 -->
        </van-list>
      </van-pull-refresh>
    </div>
    <common-tab />
  </div>
</template>

<script>
import CommonTab from 'components/CommonTab'
import HomeHead from './components/HomeHead.vue'
import { fetchHomeBanner, fetchCates, fetchItems } from 'api'
import Medicine from './components/Medicine.vue'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false,
      page: 1,
      pageSize: 4,
      loading: false,
      finished: false
    }
  },
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    enterList (id) {
      this.$router.push(`/itemlist/${id}`)
    },
    enterDetail ({ id }) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onLoad () {
      this.fetchItems()
      this.page++
    },
    onRefresh () {
      // 初始化
      this.page = 1
      this.items = []

      this.finished = false
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        if (res.data.code === 700) {
          this.loading = false
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
      })
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data.slice(0, 8)
        }
      })
    },
    fetchBanner () {
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  components: {
    CommonTab,
    HomeHead,
    Medicine
  }
}
</script>

<style lang="scss" scoped>
.wrap2{
  padding-bottom: 50px;
}
.my-swipe {
  img {
    width: 100%;
  }
}
</style>
